<script>
import { ref } from 'vue'
import { Toast } from 'vant'
export default {
  setup() {
    const value = ref('')
    const onSearch = (val) => Toast(val)
    const onClickButton = () => Toast(value.value)
    const images = [
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
      'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg'
    ]
    return {
      value,
      onSearch,
      onClickButton,
      images
    }
  }
}
</script>

<template>
  <div class="box">
    <div class="header">
      <div class="top">
        <van-search
          v-model="value"
          show-action
          label="北京"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <van-icon name="search" />
          </template>
        </van-search>
      </div>
    </div>
    <div class="body">
      <div class="swiper">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="grid">
        <van-grid :border="false" :column-num="5">
          <van-grid-item>
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
            <text>买房</text>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" />
            <text>租房</text>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" /><text
              >求租</text
            >
          </van-grid-item>

          <van-grid-item>
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
            <text>求购</text>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" />
            <text>地图找房</text>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
            <text>咨询</text>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
            <text>楼市圈</text>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" />
            <text>经纪人</text>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
            <text>团购看房</text>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" />
            <text>直播看房</text>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="property">
        <div class="yi">
          <h3>楼市咨询</h3>
          <span>更多</span>
        </div>
        <div class="er">
          <div>
            <span>Top1</span>
            <text>是我我发个若干个让人大沙</text>
          </div>
          <div>
            <span>Top2</span>
            <text>是我我发给你鼓鼓囊囊就感</text>
          </div>
          <div>
            <span>Top3</span>
            <text>是我我的当皇帝我顶顶顶顶</text>
          </div>
          <div>
            <span>Top4</span>
            <text>是我我当减肥那你放假那架</text>
          </div>
        </div>
      </div>
      <div class="remen">
        <div class="yi">
          <h3>热门楼盘</h3>
          <span>更多</span>
        </div>
        <div class="er">
          <div class="er_body">
            <div class="er_img">
              <img src="../img/1.jpg" alt="" />
            </div>

            <div class="er_wen">
              <span>石景山金鳞龙胡天街生活配套齐全</span>
              <p>43平/2室1厅/远洋新天地</p>
              <div class="er_wen_body">
                <div class="er_wen_body_left">
                  <span>114.98万</span>
                  <div>小区</div>
                </div>
                <span>13111元/m²</span>
              </div>
            </div>
          </div>
          <div class="er_body">
            <div class="er_img">
              <img src="../img/1.jpg" alt="" />
            </div>

            <div class="er_wen">
              <span>石景山金鳞龙胡天街生活配套齐全</span>
              <p>43平/2室1厅/远洋新天地</p>
              <div class="er_wen_body">
                <div class="er_wen_body_left">
                  <span>114.98万</span>
                  <div>小区</div>
                </div>
                <span>13111元/m²</span>
              </div>
            </div>
          </div>
          <div class="er_body">
            <div class="er_img">
              <img src="../img/1.jpg" alt="" />
            </div>

            <div class="er_wen">
              <span>石景山金鳞龙胡天街生活配套齐全</span>
              <p>43平/2室1厅/远洋新天地</p>
              <div class="er_wen_body">
                <div class="er_wen_body_left">
                  <span>114.98万</span>
                  <div>小区</div>
                </div>
                <span>13111元/m²</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="jingji">
        <div class="yi">
          <h3>经纪人</h3>
          <span>更多</span>
        </div>
        <div class="er">
          <van-grid :border="false" :column-num="3" :gutter="6">
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" />
              <text><van-icon name="chat-o" />咨询</text>
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg" />
              <text><van-icon name="chat-o" />咨询</text>
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" /><text
                ><van-icon name="chat-o" />咨询</text
              >
            </van-grid-item>
          </van-grid>
        </div>
        <div class="san">
          <img src=".././img/4.png" alt="">
        </div>
      </div>
        <div class="remen">
        <div class="yi">
          <h3>二手房</h3>
          <span>更多</span>
        </div>
        <div class="er">
          <div class="er_body">
            <div class="er_img">
              <img src="../img/1.jpg" alt="" />
            </div>

            <div class="er_wen">
              <span>石景山金鳞龙胡天街生活配套齐全</span>
              <p>43平/2室1厅/远洋新天地</p>
              <div class="er_wen_body">
                <div class="er_wen_body_left">
                  <span>114.98万</span>
                  <div>小区</div>
                </div>
                <span>13111元/m²</span>
              </div>
            </div>
          </div>
          <div class="er_body">
            <div class="er_img">
              <img src="../img/1.jpg" alt="" />
            </div>

            <div class="er_wen">
              <span>石景山金鳞龙胡天街生活配套齐全</span>
              <p>43平/2室1厅/远洋新天地</p>
              <div class="er_wen_body">
                <div class="er_wen_body_left">
                  <span>114.98万</span>
                  <div>小区</div>
                </div>
                <span>13111元/m²</span>
              </div>
            </div>
          </div>
          <div class="er_body">
            <div class="er_img">
              <img src="../img/1.jpg" alt="" />
            </div>

            <div class="er_wen">
              <span>石景山金鳞龙胡天街生活配套齐全</span>
              <p>43平/2室1厅/远洋新天地</p>
              <div class="er_wen_body">
                <div class="er_wen_body_left">
                  <span>114.98万</span>
                  <div>小区</div>
                </div>
                <span>13111元/m²</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</template>
<style scoped >
.jingji .san{
  width: 90%;

 
}
.jingji .san img{
  width: 100%;
  height: 100%;
}
.jingji .er text {
  width: 100px;
  height: 30px;
  background: linear-gradient(to right, #f36964, #fa8b6a);
  border-radius: 30px;
  margin-top: 10px;
  text-align: center;
  line-height: 30px;
}
.jingji {
  width: 100%;
  height: 300px;
  flex-direction: column;
  align-items: center;
  display: flex;
}
.jingji .yi {
  width: 90%;
  height: 30px;
  display: flex;
  align-items: center;
  /* margin-left:10px; */
  justify-content: space-between;
}
.er_wen_body_left div {
  width: 50px;
  height: 20px;
  background-color: #eef0ef;
  align-items: center;
  text-align: center;
  margin-top: 7px;
}
.er_wen_body_left span {
  color: #ff9900;
  font-weight: 600;
}
.er_wen_body span {
  margin-top: 10px;
  margin-right: 10px;
}
.er_wen_body {
  display: flex;
}
.remen .er {
  margin-top: 20px;
  width: 90%;
}
.remen .er_body img {
  width: 100%;
  height: 100px;
}
.remen .er_body {
  width: 90%;
  display: flex;
  align-items: center;
  height: 150px;
  justify-content: space-between;
  font-size: 10px;
}
.remen .yi {
  width: 90%;
  height: 30px;
  display: flex;
  align-items: center;
  /* margin-left:10px; */
  justify-content: space-between;
}
.remen {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
}
.property .er div span {
  width: 50px;
  height: 25px;
  background: linear-gradient(to right, #fff, #f97677);
}
.property .er {
  width: 86%;
  height: 70%;

  text-align: center;
  margin-top: 17px;
  border: 2px solid #fff;
  box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.3);
}
.property .er div {
  display: flex;
  justify-content: space-between;
  line-height: 30px;
}
.property {
  width: 100%;
  height: 200px;

  flex-direction: column;
  align-items: center;
  display: flex;
}
.property .yi {
  width: 90%;
  height: 30px;
  display: flex;
  align-items: center;
  /* margin-left:10px; */
  justify-content: space-between;
}
.box {
  width: 100%;
  height: 100vh;
}
.header {
  width: 100%;
  height: 10%;
  background-color: #1382f5;
  display: flex;
  justify-content: normal;
  align-items: center;
  justify-content: center;
}
.van-search van-search--show-action {
  background-color: #84bcf4;
}
.top {
  width: 90%;
  height: 60%;
  text-align: center;
  align-items: center;
  background: #84bcf4;
  border-radius: 10px;
}
.van-search {
  height: 100%;
  border-radius: 10px;
  background: none;
}
.swiper {
  width: 100%;
  height: 200px;
}
.van-swipe {
  width: 100%;
  height: 100%;
}
.swiper img {
  width: 100%;
  height: 100%;
}
.grid text {
  font-size: 10px;
}
</style>
